<template>
  <div class="container">
    <div v-show="loginShow" >
      请输入手机号： <input  v-model="phone" > <btn  @click="login" >确定</btn>
    </div>
    
    <div class="content"   v-show="mainShow">
      <p>是否有相关部门查询证件</p>
      <div class="btn">
        <span class="comfirm" @click="comfirmHandle">是</span>
        <span class="cancel" @click="cancelHandle">否</span>
      </div>
    </div>
  </div>
</template>

<script>
import {h5Login} from '@/api/search.js'
export default {
  name: 'Index',
  data() {
    return {
      phone: '',
      mainShow: false,
      loginShow: true,
    }
  },
  created() {},
  methods: {
   
    async login() {
      var that = this
      h5Login({phone: this.phone}).then((res) => {
        if (res.code === 0) {
          var menus = res.data.userMenus
          if(menus&& menus.length >0){ 
            localStorage.setItem("token", res.data.token);
            localStorage.setItem("userMenus", JSON.stringify(res.data.userMenus));
            localStorage.setItem("userInfo", JSON.stringify(res.data.user));
            that.loginShow =  false,
            that.mainShow = true 
          }else{
            that.$toast("无权限访问")
          }
        }else{
          that.$toast("无权限访问")
        }
      })
    },
    cancelHandle() {
      this.$router.push('/cancelIndex')
    },
    comfirmHandle() {
      this.$router.push('/comfirmIndex')
    },
  },
}
</script>
<style lang="scss" scoped>
@import '../assets/styles/color.scss';
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: $bg-color;
  .content {
    position: relative;
    width: 300px;
    height: 174px;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0px 1px 2px 0 rgba($color: #000000, $alpha: 0.5);
    > p {
      padding: 30px 0;
      display: flex;
      justify-content: center;
      font-size: 20px;
      font-weight: 700;
    }
    .btn {
      display: flex;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 40px;
      border-top: 1px solid #eee;
      > span {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
        font-size: 18px;
        font-weight: 700;
        &.comfirm {
          border-right: 1px solid #eee;
        }
      }
    }
  }
}
</style>
